import React,{Component} from 'react';
import { Card,Table, message,Image} from 'antd';
import { reqFeedbackList} from '../../api/index';
import {PAGE_SIZE,IMAGE_URL} from '../../config/index';


class FeedBack extends Component {
    state={
        feedbackList:[],  //商品分类列表
      isLoading:true, //table是否显示加载动画

    }
      componentDidMount(){
         this.getFeedbackList()
      }
      // 获取反馈信息
      getFeedbackList= async ()=>{
          let result= await reqFeedbackList()
          const { code, data, msg } = result
          if(code === 200){
            if(data.length===0)  message.success(msg,1)
            this.setState({feedbackList:data})

            this.setState({isLoading:false})
          }else{
            message.error(msg,1)
            this.setState({isLoading:false})
          }
      }
    showImage=(item)=>{
        if(item.images){
            const imagesList = item.images.split(',');
            return  imagesList.map((itemOne,index)=>{
                return( 
                    <Image
                        width={100}
                        height={100}
                        src={IMAGE_URL+itemOne}
                        key={index}
                    />
                )
            })
        }
    }

    render(){
        const { feedbackList} = this.state;
        const columns = [
            {title: '联系人',
              dataIndex: 'name',
              key: 'id',
            },
            {title: '联系方式',
              dataIndex: 'mobile',
              key: 'id',
            },
            {title: '反馈内容',
              dataIndex: 'content',
              key: 'id',
            },
            {title: '相关图片',
              key: 'id',
              render:(item)=>{
                  return  <Image.PreviewGroup>{this.showImage(item)}</Image.PreviewGroup>
                }
            }
        ];
        return (
            <div>
                 <Card>
                 <Table  
                    bordered 
                    dataSource={feedbackList} 
                    columns={columns}
                    rowKey="id" 
                    pagination={{pageSize:PAGE_SIZE,showQuickJumper :true}}
                    loading={this.state.isLoading}
                />
                </Card>
            </div>
        );
    }
}
export default  FeedBack;